<template>
	<view class="content">
		<view class="invitation-top">
			<view class="user-tx">
				<image :src="userInfo.avatar" mode=""></image>
			</view>
			<view class="user-r">
				<view class="user-name">
					{{userInfo.username || '请登录~'}}
				</view>
				<view class="user-phone">
					账号：{{ phoneNumber}}
				</view>
			</view>
			<view class="inv">
				<button class="u-reset-button" @click="onPoster">立即邀请</button>
			</view>
			<view class="des">
				{{ userInfo.info }}
			</view>
		</view>
		<view class="invitation-list">
			<view class="invitation-title">邀请记录</view>
			<block v-if="invList && invList.length > 0">
				<view class="invitation-li" v-for="(item,index) in invList" :key="index">
					<view class="left">
						<image :src="item.avatar" mode=""></image>
						<view class="user-info">
							<text class="name">{{item.nickname}}</text>
							<text class="time">注册时间：{{item.createtime}}</text>
						</view>
					</view>
				</view>
			</block>
			<view v-else style="margin-top: 10vh;">
				<u-empty text="暂无数据"></u-empty>
			</view>

		</view>
		<shoproShare v-if="showPoster" ref="shoproCanvas" :canvasParams="canvasParams" @success="onSuccess">
		</shoproShare>
		<!-- 邀请二维码展示 -->
		<u-mask :show="codeShow" @click="show = false">
			<view class="warp">
				<view class="poster-img-box">
					<image class="poster-img" :src="posterImage" mode="widthFix"></image>
				</view>
				<view class="poster-btn-box u-m-t-20 u-flex u-row-between u-col-center" v-show="posterImage">
					<button class="cancel-btn u-reset-button" @tap="imageClear">取消</button>
					<button class="save-btn u-reset-button" @tap="saveImage">保存图片</button>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import shoproShare from '../../../components/shopro-share/index.vue'
	export default {
		components: {
			shoproShare
		},
		data() {
			return {
				userInfo: [],
				posterImage: '',
				showPoster: false,
				canvasParams: '',
				posterType: 'user',
				codeShow: false,
				erweima: '',
				backgroundImage: '',
				invImage: '',
				invList: [],
				phoneNumber: "",
			}
		},
		onShow() {
			this.phoneNumber = uni.getStorageSync('phoneNumber')
		},
		onLoad() {
			// this.getUserInfo()
			this.getInvList()
			this.geiYaoQing()

		},
		methods: {
			// 获取用户信息
			// getUserInfo(){
			// 	uni.$u.http.post('user/userinfo',{
			// 		openid:uni.getStorageSync('openid')
			// 	}).then(res =>{
			// 		console.log(res)
			// 		this.userInfo = res.data
			// 	})
			// },
			// 获取邀请列表
			getInvList() {
				uni.$u.http.post('index/invitation_list').then(res => {
					console.log(res,'09809908098080')
					this.invList = res.data.invitation
					this.userInfo = res.data.user
				}).catch(err => {
					this.userInfo = err.data.data.user
				})
			},
			//邀请好友
			geiYaoQing() {
				uni.$u.http.post('index/invitation_image').then(res => {
					this.invImage = 'https://www.sdxiecheng.cn' + res.data.img
				})
				uni.$u.http.post('user/create_invite').then(res => {
					console.log(res)
					this.erweima = 'https://www.sdxiecheng.cn' + res.data.ewm
					this.backgroundImage = 'https://www.sdxiecheng.cn' + res.data.list.image
				})
			},
			onPoster() {
				console.log('点击11->')
				this.posterImage = '';
				this.canvasParams = this.getPosterFormatter();
				this.showPoster = true;
			},
			// 绘制成功
			onSuccess(e) {
				this.posterImage = e;
				console.log(e)
				this.codeShow = true
			},
			// 获取海报格式,规则说明在@/shopro/poster/tools.js中的initDrawArray
			getPosterFormatter() {
				const that = this;
				let data = {};
				switch (this.posterType) {
					case 'user':
						data = {
							backgroundImage: that.backgroundImage,
							// backgroundImage: that.erweima,
							drawArray: [
								// {
								// 	name: '用户昵称',
								// 	type: 'text',
								// 	text: '用户昵称',
								// 	isBgCenter: true,
								// 	size: 28,
								// 	dy: 250,
								// 	color: '#333',
								// 	textAlign: 'middle',
								// 	textBaseLine: 'middle'
								// },
								// {
								// 	name: 'avatar',
								// 	type: 'image',
								// 	url: 'https://s1.ax1x.com/2022/07/29/vPlvgx.png',
								// 	alpha: 1,
								// 	isBgCenter: true,
								// 	dy: 95,
								// 	dWidth: 120,
								// 	dHeight: 120,
								// 	circleSet: {}
								// },
								// #ifdef MP-WEIXIN
								{
									name: '微信二维码',
									type: 'image',
									url: that.erweima,
									alpha: 1,
									isBgCenter: true,
									dx: 400,
									dy: 500,
									dWidth: 200,
									dHeight: 200
								},
								// #endif
								// #ifndef  MP-WEIXIN
								{
									name: '普通二维码',
									type: 'qrcode',
									text: that.shareInfo.path,
									size: 180,
									dy: 560,
									isBgCenter: true
								}
								// #endif
							]
						};
						console.log(data)
						break;
					default:
						console.log('%cerr:没有此类型海报数据', 'color:green;background:yellow');
						break;
				}
				return data;
			},
			imageClear() {
				this.codeShow = false
				this.showPoster = false;
			},
			saveImage() {
				let that = this
				uni.saveImageToPhotosAlbum({
					filePath: that.posterImage,
					success: res => {
						this.$u.toast('保存成功');
						this.codeShow = false;
					},
					fail: err => {
						console.log(`图片保存失败:`, err);
						this.$u.toast('保存失败');
					}
				});
			},
		}
	}
</script>

<style lang="less">
	.warp {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.content {
		padding: 17rpx 20rpx;
	}

	.invitation-top {
		width: 100%;
		height: 300rpx;
		background: linear-gradient(-50deg, #FFDD95 0%, #FBAA28 100%);
		border-radius: 10px;
	}

	.invitation-list {
		margin-top: 30rpx;

		.invitation-title {
			margin-bottom: 30rpx;
			font-size: 30rpx;
		}
	}

	.invitation-top {
		display: flex;
		padding-top: 45rpx;
		padding-left: 34rpx;
		position: relative;
	}

	.inv {
		position: absolute;
		top: 56rpx;
		right: 20rpx;

		button {
			width: 130rpx;
			height: 40rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FBAC2E;
			font-size: 24rpx;
			font-weight: 500;
		}
	}

	.des {
		position: absolute;
		left: 34rpx;
		bottom: 45rpx;
		color: #FFFFFF;

	}

	.user-tx {
		width: 114rpx;
		height: 114rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 36rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.user-r {
		margin-top: 10rpx;

		.user-name {
			font-size: 36rpx;
			color: #FFFFFF;
			margin-bottom: 8rpx;
			font-weight: bold;
		}

		.user-phone {
			font-size: 24rpx;
			color: #FFFFFF;
			font-weight: 500;
		}
	}

	.invitation-li {
		width: 100%;
		height: 149rpx;
		border-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		padding-left: 21rpx;

		.left {
			display: flex;
			align-items: center;
		}

		.user-info {
			text {
				display: block;
			}

			.name {
				font-size: 30rpx;
				margin-bottom: 10rpx;
			}

			.time {
				color: #888888;
				font-size: 24rpx;
			}
		}

		image {
			width: 89rpx;
			height: 89rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 23rpx;
		}
	}

	// 分享海报
	.poster-btn-box {
		.cancel-btn {
			width: 240rpx;
			height: 70rpx;
			line-height: 70rpx;
			background: #ffffff;
			border-radius: 35rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #999999;
		}

		.save-btn {
			width: 240rpx;
			height: 70rpx;
			line-height: 70rpx;
			background: #FF9A33;
			border-radius: 35rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
			margin-left: 20rpx;
		}
	}

	/deep/.u-badge {
		min-width: 40rpx;
		height: 40rpx;
		font-size: 20rpx;
	}
</style>
